<template>
        <div class="houses">
        <div class="houseList">
            <van-pull-refresh success-text="刷新成功"  v-model="refreshing" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                loading-text="loading..."
                finished-text="没有更多了"
                :offset="315"
                @load="onLoad"
            >

                <dl v-for="(v,i) in toHouse.houseList" :key="i" @click="HouseDetail(v)">
                        <dt>
                            <img src="../../images/xhl.jpg" alt="">
                        </dt>
                        <dd>
                            <h3 class="houses_tit">
                                {{v.house_title}}&emsp;{{v.house_tags}}
                            </h3>
                            <p class="house_size">
                                {{v.acreage}}/{{v.bedroom_count}} / {{v.house_title}}
                            </p>
                            <p class="house_price">
                                <span class="total_price">{{v.total_price}}</span><span>{{v.per_price}}</span>
                            </p>
                            <p class="house_address">{{v.address}}</p>
                            <p class="house_type">
                                <span>{{v.house_type}}</span>
                            </p>
                        </dd>
                    </dl>
                </van-list>
            </van-pull-refresh>
        </div>
        <div class="HousesType" v-if="typs">
            <p class="homes" @click="toHome">
                <van-icon name="wap-home"></van-icon>
                首页
            </p>
            <!-- <p class="sort" @click="sort">
                <van-icon name="sort"></van-icon>
                排序
            </p> -->
        </div>
    </div>
</template>

<script>
import { computed, defineComponent ,nextTick,reactive , ref ,onMounted , watch} from 'vue'
import {getHouseDatum} from '../../api/getDatum'
import {Toast} from 'vant'
import {useRouter} from 'vue-router'
import {bus} from '../../utils/Bus'
export default defineComponent({
    props:['tit'],
  setup(props,context) {

    let loading = ref(false);
    let finished = ref(false);
    let refreshing = ref(false);
    let show = ref(true);
    let router = useRouter();
    let typs = ref(true);
    const load = reactive({
        loadLis:[],
    })
    let toHouse = reactive({
          houseList:[],
          imgLis:[],
          total:0,
          pageIndex:0,
          pageSize:10,
          houseLis:[],
          houser:[],
          tesk:JSON.parse(localStorage.getItem('scree')).verify.title,
          orient:JSON.parse(localStorage.getItem('scree')).direction.title,
          condition:JSON.parse(localStorage.getItem('scree')).condition.title,
          buyHouses:JSON.parse(localStorage.getItem('roomTy')).houseTy.title,
          roomHouse:JSON.parse(localStorage.getItem('roomTy')).roomTy.title,
        })

      //获取数据   
      const gethouseList =  () => { 
        const houseT =  getHouseDatum({
            params:{
                pageIndex:0,
                pageSize:10,
            }
        });

        nextTick(async () => {
          let data =  await houseT;
            toHouse.houseList = data.data.list;
            toHouse.total = data.data.total;
        })
      }

      gethouseList();

      

      if(props.tit === '地图找房'){
        typs.value = false
      }

      

      onMounted(() => {

          bus.on('searchs',(val) => {
            toHouse.houseList = val;
          });

          bus.on('inp',(val) => {
              console.log(val,'val');
              toHouse.houseList = val;
          });

          bus.on('getMaps',(val) => {
            console.log(val,'va');
            toHouse.houseList = val;
          });
      })


    //   去主页
    const toHome = () => {
        router.push('/home')
    }

    // 排序
    // const sort = () => {
    //     show.value = true;
    //     console.log(show.value);
    // }
      

      
      //获取图片数据   
    //   const imgs = async () => {
    //      const data = await axios.post('/api/imgs')

    //      data.data.forEach(item => {
    //          toHouse.imgLis.push(item.img);
    //      })
    //   }

    //   imgs()
      //滚动条滚动到底部触发事件   
      const onLoad =  async  () => {
          console.log(1,'1');
            if (refreshing) {
                load.loadLis = [];
                refreshing.value = false;
            }

            

            // setTimeout(() => {
            //     getHouseDatum({
            //     params:{
            //         pageIndex:toHouse.pageIndex,
            //         pageSize:10
            //     }
            // }).then(res => {

            
            // toHouse.total = res.data.total;
            // toHouse.houseList.concat(res.data.list)
            // toHouse.pageIndex++;
            
            //     loading.value = false;


            // if (toHouse.houseList.length >= toHouse.total) {
                
            //     finished.value = true;
            // }
            // })
            // },500)
            
      }
      //刷新   
      const onRefresh = () => {
        //   data();
        // // 清空列表数据
        // finished.value = false;

        // // 重新加载数据
        // // 将 loading 设置为 true，表示处于加载状态
        // loading.value = true;
        
        // onLoad()
      }

    //   跳转详情页
    const HouseDetail = (Housedatum) => {
        localStorage.setItem('detailDatum',JSON.stringify(Housedatum))
        router.push({path:'/detail'})
    }

      return {    
        toHouse,
        loading,
        finished, 
        refreshing,   
        show,
        typs,
        onRefresh, 
        onLoad,   
        HouseDetail,
        toHome,
      }
  },
})
</script>

<style lang='less' scoped>
.houses{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    .houseList{
        flex: 1;
        overflow-y: auto;
        dl{
        width: 100%;
        height: 110px;
        padding: 12px 20px 0 20px;
        display: flex;
        dt{
            width: 122px;
            height: 86px;
            margin-right: 10px;
            img{
                width: 122px;
                height: 86px;
                margin-right: 10px;
                display: block;
            }
        }
        dd{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            line-height: 16px;
            h3{
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                font-size: 15px;
                font-weight: bold;
            }
            .house_size{
                font-size: 13px;
            }
            .house_price{
                font-size: 13px;
                .total_price{
                    color: #f19e39;
                    margin-right: 8px;
                }
                .per_price{
                    color: #cecece;
                    font-size: 11px;
                }
            }
            .house_address{
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                font-size: 13px;
                color: #c9c9c9;
            }
            .house_type{
                margin-top: 4px;
                color: #333;
                font-size: 14px;
                span{
                    padding: 1px 15px;
                    background: #eff0ee;
                }
            }
        }
    }
}
.HousesType{
    width: 86px;
    height: 80px;
    position: absolute;
    bottom: 100px;
    right: 15px;
    p{
        width: 100%;
        height: 28px;
        border: 1px solid #cccccc;
        font-size: 13px;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 28px;
        border-radius: 40px;
        background: #fff;
    }
}
}
</style>
